<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <title>SL--消费账户</title>
		<meta charset='utf-8'>
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
		<!-- 引入 Bootstrap -->
			<link href="${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet">
			<link href="${pageContext.request.contextPath }/css/foundation-datepicker.min.css" rel="stylesheet" type="text/css">
		<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
		<!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
		<![endif]-->
		<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
		<script src="${pageContext.request.contextPath }/js/jquery.js"></script>
		<!-- 包括所有已编译的插件 -->
		<script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
		<script src="${pageContext.request.contextPath }/js/foundation-datepicker.min.js"></script>
		<script src="${pageContext.request.contextPath }/js/locales/foundation-datepicker.zh-CN.js"></script>
    </head>
	
	<style>
		#baseAccount{
			padding:50px 0px;
			width:670px;
			margin:0px auto;
		}
	</style>
	
	<body>
		
		<div id="baseAccount">
		
			<div id="search">
				<form class="form form-inline" action="#" method="post">
					<div class="form-group">
						<label class="control-label">日期 : </label> &ensp;
						<input class="form-control" id="start" size="16" name="start" value=''>
						 - 
						<input class="form-control" id="end" size="16" name="end" value=''>
						&ensp;<input class="btn btn-primary" type="submit" value="&ensp; 查  询 &ensp;">
					</div>
				</form>
			</div>
			<br/>
			<table id="sl" class="table table-bordered table-hover">
				<thead class="text-center">
					<tr class="info">
						<th class="text-center">日期</th>
						<th class="text-center">摘要</th>
						<th class="text-center">账单类型</th>
						<th class="text-center">金额</th>
						<th class="text-center">余额</th>
					<tr>
				</thead>
					
				<tbody class="text-center">
					<tr>
						<td> 2012-3-3 14:20:33 </td>
						<td> 获赠30积分! </td>
						<td class='success'> 收入 </td>
						<td> +30.00 </td>
						<td> 1030.00 </td>
					</tr>
					<tr>
						<td> 2012-3-3 14:20:33 </td>
						<td> 购买指定商品消费50.00! </td>
						<td class='danger'> 支出 </td>
						<td> -50.00 </td>
						<td> 1030.00 </td>
					</tr>
				</tbody>
			
			
			</table>
			
			<div id="page" align="center">
				<ul class="pagination">
					<li class="disabled"> <a href="#"> &lt;&lt; </a> </li>
					<li class="disabled"> <a href="#"> &lt; </a> </li>
					<li class="active"> <a href=""> 1 </a> </li>
					<li> <a href="#"> 2 </a> </li>
					<li> <a href="#"> 3 </a> </li>
					<li> <a href="#"> 4 </a> </li>
					<li> <a href="#"> 5 </a> </li>
					<li> <a href="#"> 6 </a> </li>
					<li> <a href="#"> &gt; </a> </li>
					<li> <a href="#"> &gt;&gt; </a> </li>
				</ul>
			</div>
		</div>
		
    </body>
	
	<script>
		var now = new Date();
		var nowT = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 8, 0, 0, 0);
		var checkin = $('#start').fdatepicker({
			format: 'yyyy-mm-dd',
			onRender: function (date) {
				return date.valueOf() >= now.valueOf() ? 'disabled' : '';
			}
		}).on('changeDate', function (ev) {
			if (ev.date.valueOf() > checkout.date.valueOf()) {
				var newDate = new Date(ev.date)
				newDate.setDate(newDate.getDate() + 1);
				checkout.update(newDate);
			}
			checkin.hide();
			$('#end')[0].focus();
		}).data('datepicker');
		var checkout = $('#end').fdatepicker({
			format: 'yyyy-mm-dd',
			onRender: function (date) {
				var flag=false;
				if(date.valueOf() >= now.valueOf()){
					flag=true;
				} 
				
				if(date.valueOf() <= checkin.date.valueOf()){
					if(checkin.date.valueOf()==nowT.valueOf()){
						flag=false;
					}else{
						flag=true;
					}
				}
				return flag ? 'disabled' : '';
			}
		}).on('changeDate', function (ev) {
			checkout.hide();
		}).data('datepicker');
		
		
	</script>
</html>